prosemirror-transform

What is prosemirror-transform?

The prosemirror-transform package is a part of the ProseMirror toolkit, which provides a set of tools for building rich-text editors. This package specifically deals with transforming ProseMirror documents, allowing you to apply changes, manipulate document structure, and handle collaborative editing scenarios.

What are prosemirror-transform's main functionalities?

Applying Steps

This feature allows you to apply a step to a ProseMirror document. Steps are atomic changes that can be applied to a document, such as inserting or deleting content.

const { Step } = require('prosemirror-transform');
const { Schema, DOMParser } = require('prosemirror-model');
const { schema } = require('prosemirror-schema-basic');

let doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
let step = new Step();
let result = step.apply(doc);
console.log(result.doc);

Transformations

This feature allows you to create a transformation and apply multiple changes to a document. Transformations can include inserting, deleting, or replacing content.

const { Transform } = require('prosemirror-transform');
const { Schema, DOMParser } = require('prosemirror-model');
const { schema } = require('prosemirror-schema-basic');

let doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
let tr = new Transform(doc);
tr.insert(1, schema.text('Hello, world!'));
console.log(tr.doc);

Mapping Positions

This feature allows you to map positions in a document, which is useful for collaborative editing where multiple users are making changes simultaneously. The Mapping class helps keep track of position changes.

const { Mapping } = require('prosemirror-transform');

let mapping = new Mapping();
mapping.appendMap({ map: [0, 1, 2, 3] });
let newPos = mapping.map(2);
console.log(newPos);

Other packages similar to prosemirror-transform

slate

Slate is a completely customizable framework for building rich text editors. It provides a set of tools for transforming documents, similar to prosemirror-transform, but with a different API and more focus on React integration.

draft-js

Draft.js is a framework for building rich text editors in React. It offers similar document transformation capabilities but is more tightly integrated with React and provides a different set of abstractions for handling content.

quill

Quill is a powerful, rich text editor that provides a simple API for transforming documents. It is less modular than ProseMirror but offers a more out-of-the-box solution for common rich text editing needs.

README

prosemirror-transform

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This is a core module of ProseMirror. ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

This module implements document transforms, which are used by the editor to treat changes as first-class values, which can be saved, shared, and reasoned about.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license. There's a forum for general discussion and support requests, and the Github bug tracker is the place to report issues.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Changelog

1.10.3 (2025-03-04)

Bug fixes

Make sure Mapping.appendMap doesn't mutate shared arrays passed to its constructor.